<template>
    <div>
        <router-link v-for='item in props.mylikeData' :key='item.id'
            :to="{ name: 'NewDetail', params: { uuid: item.uuid, author: item.author } }">
            <div class="element element--article">
                <figure class="article__figure">
                    <img :srcset="item.imgUrl" sizes="(max-width: 655px) 1280px,  300px" :src="item.imgUrl"
                        v-if="item.imgUrl">
                    <img src="../../assets/noimg.png" alt="" v-else>
                </figure>
                <div class="article__content">
                    <h3 class="article__headline">{{ item.title }}</h3>
                    <div class="content--secondary" id="content--secondary-0"></div>

                </div>
            </div>
        </router-link>
    </div>
</template>
<script setup>
const props = defineProps(['mylikeData'])
</script>
<style lang="scss" scoped>
.element--article {
    border-bottom: 1px solid #e1e1e1;
    display: flex;
    flex-flow: row nowrap;
    margin: 0;
    padding: 10px 0;
    margin-bottom: 20px;

    .article__figure {
        flex: 0 0 300px;
        max-width: 300px;
        margin-right: 10px;
    }
}
</style>